// pages/chat/chat.js
Page({
    data: {
      scrollTop: 0, // 用于手动控制滚动位置
      inputValue: '',
      showWelcome: true,
      loadingHistory: false,
      sendingStatus: '',
      showEmojiPanel: false,
      isInputFocus: false,
      chatList: [
        { id: 1, type: 'service', content: '你好！有什么可以帮助你的吗？', time: '09:30' },
        { id: 2, type: 'user', content: '我想了解一下你们的产品。', time: '09:31' },
      ],
      emojiList: ['😀', '😁', '😂', '🤣', '😃', '😄', '😅', '😆', '😉', '😊']
    },
  
    onLoad(options) {
      // 页面加载后，确保滚动到底部
      this.scrollToBottom();
    },
    
    /**
     * 监听聊天区域的滚动事件 (核心修改)
     */
    onChatScroll(e) {
      const scrollTop = e.detail.scrollTop;
      
      // 当滚动条接近顶部时（例如 scrollTop < 50），加载更多历史消息
      if (scrollTop < 50 && !this.data.loadingHistory) {
        this.loadMoreHistory();
      }
    },
  
    /**
     * 输入框内容变化
     */
    inputChange(e) {
      this.setData({
        inputValue: e.detail.value
      });
    },
  
    /**
     * 发送消息
     */
    sendMessage() {
      const content = this.data.inputValue.trim();
      if (!content) return;
  
      const newMessage = {
        id: Date.now(),
        type: 'user',
        content: content,
        time: this.formatTime(new Date()),
        anim: this.createAnimation()
      };
  
      this.setData({
        chatList: [...this.data.chatList, newMessage],
        inputValue: '',
        sendingStatus: 'sending'
      });
  
      // 发送后滚动到底部
      this.scrollToBottom();
  
      // 模拟发送成功和客服回复
      setTimeout(() => {
        this.setData({ sendingStatus: '' });
        
        setTimeout(() => {
          const replyMessage = {
            id: Date.now(),
            type: 'service',
            content: '您好，我们的产品是一款非常棒的小程序开发工具。',
            time: this.formatTime(new Date()),
            anim: this.createAnimation()
          };
          this.setData({
            chatList: [...this.data.chatList, replyMessage]
          });
          // 回复后也需要滚动到底部
          this.scrollToBottom();
        }, 1000);
  
      }, 800);
    },
  
    /**
     * 手动将滚动条滚动到底部 (核心修改)
     */
    scrollToBottom() {
      // 使用 nextTick 确保 DOM 已更新
      setTimeout(() => {
        const query = wx.createSelectorQuery().in(this);
        query.select('.chat-list').boundingClientRect(rect => {
          // rect.height 是聊天内容的总高度
          if (rect) {
            this.setData({
              scrollTop: rect.height
            });
          }
        }).exec();
      }, 0);
    },
  
    /**
     * 加载更多历史消息
     */
    loadMoreHistory() {
      if (this.data.loadingHistory) return;
  
      this.setData({ loadingHistory: true });
  
      // 模拟加载历史消息
      setTimeout(() => {
        const historyMessages = [
          { id: Date.now() - 1000, type: 'service', content: '欢迎回来！上次我们聊到哪里了？', time: '昨天 18:30' },
          { id: Date.now() - 2000, type: 'user', content: '我想了解一下会员价格。', time: '昨天 18:28' },
        ];
        // 将新的历史消息添加到数组前面
        this.setData({
          chatList: [...historyMessages, ...this.data.chatList],
          loadingHistory: false
        });
        // 注意：加载历史后不需要滚动到底部，保持用户当前的滚动位置即可
      }, 1000);
    },
  
    // 选择表情
    selectEmoji(e) {
      const emoji = e.currentTarget.dataset.emoji;
      this.setData({
        inputValue: this.data.inputValue + emoji
      });
    },
  
    // 切换表情面板
    toggleEmojiPanel() {
      this.setData({
        showEmojiPanel: !this.data.showEmojiPanel,
        isInputFocus: false
      });
    },
  
    // 格式化时间
    formatTime(date) {
      const hours = date.getHours().toString().padStart(2, '0');
      const minutes = date.getMinutes().toString().padStart(2, '0');
      return `${hours}:${minutes}`;
    },
  
    // 创建消息出现动画
    createAnimation() {
      const animation = wx.createAnimation({
        duration: 300,
        timingFunction: 'ease-out'
      });
      animation.opacity(0).translateY(20).step();
      animation.opacity(1).translateY(0).step();
      return animation.export();
    }
  })